<template>
	<view class="content_box1" v-show="true">
		<view style="height: 1px"></view>
		<view class="content">
			<view class="title"><u-notice-bar type="none" color=" #bd1612" :volume-icon="false" mode="vertical" :font-size="24" :list="list"></u-notice-bar></view>
			<view class="scratch" :style="'background-image:url(' + imgbg + ')'">
				<view class="txt">刮刮卡一张</view>
				<view class="compinents">
					<view class="canvasView">
						<view class="imgbox">
							<canvas :style="'left:'+canvasLeft+'px'" class="canvas1" id="canvas1" canvas-id="canvas1" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
							<view class="images" v-if="winList && winList.image">
								<view class="img"><vimage mode="widthFix" :src="winList.image"></vimage></view>

								<view class="txt">{{ winList.name }}</view>
							</view>
							<view class="u-flex u-row-center" style="height: 200rpx;" v-else><text>奖品加载中...</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="l_title">今日免费次数：{{ form.dnumber }}次,今日次数：{{ form.get_number }}/{{ form.limit }}次</view>
			<view class="btn" @click="again">
				<vimage mode="widthFix" v-if="form.other.prize_btn_img" :src="form.other.prize_btn_img"></vimage>
				<vimage mode="widthFix" v-else imgtype="1" src="static/images/scratch_btn.png"></vimage>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	props: {
		list: {
			type: Array,
			default: null
		},
		form: {
			type: Object,
			default: null
		},
		winList: {
			type: Object | String,
			default: null
		},
		canvasLeft:{
			type:String | Number,
			default:99999
		}
	},
	data() {
		return {
			viewWidth: 0,
			viewHeight: 0,
			ctx: null,
			x: [],
			y: [],
			points: [],
			computing: false,
			percentage: 25,
			first: true,
			success_first: true,
			imgbg: '',
			r: 16,
			minX:'',
			minY:'',
			maxX:'',
			maxY:'',
			// left:9999
		};
	},
	mounted() {
		this.imgbg = util.getimgurl('static/images/scratch_card.png', '1');
		this.ctx = uni.createCanvasContext('canvas1', this);
		// this.drawInit();
		// this.$emit('win', false, 2)
	},
	methods: {
		doing(){
			
		},
		getScratch() {
			if (this.first) {
				this.first = false;
				// 获取结果
				this.$emit('win', false, 1);
			}
		},
		touchstart(e) {
		
			this.getScratch();
			if (this.winList instanceof Object) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					x: startX,
					y: startY
				};
				//存点 一起画
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径F
				this.ctx.beginPath();
			}
		},
		touchmove(e) {
		
			let stepClear = 2;
			// this.drawRect(e.touches[0].x, e.touches[0].y)

			if (this.winList instanceof Object) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				// let movePoint = {
				// 	x: moveX,
				// 	y: moveY
				// };
				// this.points.push(movePoint);
				
				this.drawRect(moveX, moveY)
				this.clearArc(moveX, moveY, stepClear);
				this.ctx.draw(true);
				
			} else {
				uni.showToast({
					title: this.winList,
					icon: 'none',
					duration: 2000
				});
			}
		},
		touchend(e) {
			// this.points = [];
			// this.getFilledPercentage();
			if (this.computing) {
				return;
			}
			  const self = this;
			let canvasWidth = self.viewWidth;
			let canvasHeight = self.viewHeight;
			let minX = self.minX;
			let minY = self.minY;
			let maxX = self.maxX;
			let maxY = self.maxY;
			if (maxX - minX > .4 * canvasWidth && maxY - minY > .4 * canvasHeight ) {
				console.log('end')
				this.success();
				this.computing = true;
			}
		},
		
		drawRect(x, y) {
		    const self = this;
		    const r = self.r / 2;
		    const x1 = x - r > 0 ? x - r : 0
		    const y1 = y - r > 0 ? y - r : 0
			
		    if ('' !== self.minX) {
				console.log(self.minX)
		        self.minX = self.minX > x1 ? x1 : self.minX;
		        self.minY = self.minY > y1 ? y1 : self.minY;
		        self.maxX = self.maxX > x1 ? self.maxX : x1;
		        self.maxY = self.maxY > y1 ? self.maxY : y1;
			
		    } else {
			
		        [self.minX, self.minY, self.maxX, self.maxY] = [x1, y1, x1, y1];
				console.log(self.minX)
		    }
		    [self.lastX, self.lastY] = [x1, y1];
			
		    return [x1, y1, 2 * r]
		},
		// 获取元素宽高
		getViewHW() {
			let info = uni
				.createSelectorQuery()
				.in(this)
				.select('.imgbox');
			console.log(info);
			return new Promise((resolve, reject) => {
				info.boundingClientRect(data => {
					console.log(data);
					this.viewWidth = data.width;
					this.viewHeight = data.height;
					resolve();
				}).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				});
			});
		},
		// getFilledPercentage: function(e) {
		// 	if (this.computing) {
		// 		return;
		// 	}
		// 	this.computing = true;
		// 	uni.canvasGetImageData(
		// 		{
		// 			canvasId: 'canvas1',
		// 			x: 0,
		// 			y: 0,
		// 			width: this.viewWidth,
		// 			height: this.viewHeight,
		// 			success: res => {
		// 				let pixels = res.data;
		// 				let transPixels = [];
		// 				for (let i = 0; i < pixels.length; i += 4) {
		// 					if (pixels[i + 3] < 128) {
		// 						transPixels.push(pixels[i + 3]);
		// 					}
		// 				}
		// 				var percent = ((transPixels.length / (pixels.length / 4)) * 100).toFixed(2);
		// 				if (percent >= this.percentage) {
		// 					this.success();
		// 				}
		// 				this.computing = false;
		// 			},
		// 			fail: function(e) {
		// 				console.log(e);
		// 			}
		// 		},
		// 		this
		// 	);
		// },
		drawLine() {
			let points1 = this.points[0];
			let points2 = this.points[1];
			this.points.shift();
			// this.ctx.moveTo(points1.x, points1.y)
			// this.ctx.lineTo(points2.x, points2.y)
			// this.ctx.stroke()
			// this.ctx.draw(true)
			// uni.showToast({
			// 	title:JSON.stringify(points1)
			// })
		},
		clearArc(x, y, stepClear) {
			let r = this.r;
			let ctx = this.ctx;
			let calcWidth = r - stepClear;
			let calcHeight = Math.sqrt(r * r - calcWidth * calcWidth);
			let posX = x - calcWidth;
			let posY = y - calcHeight;
			let widthX = 2 * calcWidth;
			let heightY = 2 * calcHeight;
			if (stepClear <= r) {
				ctx.clearRect(posX, posY, widthX, heightY);
				stepClear += 2;
				this.clearArc(x, y, stepClear);
			}
		},
		async drawInit() {
			await this.getViewHW();
			// this.left=0
			// this.is_show=true
			this.ctx.globalCompositeOperation = 'source-over';
			let x = this.viewWidth;
			let y = this.viewHeight;

			this.ctx.setFillStyle('#D5D5D5');
			this.ctx.fillRect(0, 0, x, y);

			this.ctx.setFontSize(30);
			this.ctx.setTextBaseline('middle');
			this.ctx.setFillStyle('black');
			this.ctx.setTextAlign('center');
			this.ctx.fillText('刮奖区', x / 2, y / 2);

			this.ctx.lineWidth = 4;
			this.ctx.lineCap = 'round';
			this.ctx.lineJoin = 'round';
			this.ctx.draw(true);
			//接下来线的样式
			// this.ctx.lineWidth = 10; //刮的大小
			// this.ctx.lineCap = "round"
			// this.ctx.lineJoin = "round"
			// this.ctx.globalCompositeOperation = 'destination-out' //关键是这个属性
		},
		success() {
			if (this.success_first) {
				this.success_first = false;
				this.$emit('win', true);
			}
		},
		// 再来一次
		again() {
			if (this.first == false) {
				this.points = [];
				this.drawInit();
				this.computing=false
			}
			this.$emit('init');
			this.success_first = true;
			this.first = true;
			
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box1 {
	.content {
		width: 620rpx;
		margin: auto;
		// margin-top: 380rpx;
		background: #f4efdc;
		border-radius: 6rpx;
		padding: 40rpx;
		position: relative;
		border-top: #ded9c8 solid 20rpx;

		.title {
			width: 100%;
			background: #ecd3b5;
			border-radius: 10rpx;
		}

		.scratch {
			width: 100%;
			margin: auto;
			margin-top: 10rpx;
			background-repeat: no-repeat;
			// background: url('@/static/images/scratch_card.png') no-repeat;
			background-size: contain;
			padding: 50rpx 40rpx;

			.txt {
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				font-size: 32rpx;
				font-family: Adobe Heiti Std;
			}

			.compinents {
				position: relative;
				width: 100%;
				height: 200rpx;

				.compinents_scratch {
					width: 100%;
					height: 100%;
					text-align: center;

					image {
						width: 200rpx;
					}
				}

				.compinents_bg {
					width: 100%;
					height: 100%;
					display: block;
					background: #d5d5d5;
					font-size: 52rpx;
					color: #fff;
					text-align: center;
					line-height: 180rpx;
					letter-spacing: 16rpx;
					text-indent: 10rpx;
				}
			}

			.compinents:before {
				content: '';
				width: 0;
				height: 212rpx;
				position: absolute;
				border-left: 14rpx dotted #fac56a;
				left: -4rpx;
				top: -6rpx;
				z-index: 99;
			}

			.compinents::after {
				content: '';
				width: 0;
				height: 212rpx;
				position: absolute;
				border-right: 14rpx dotted #fac56a;
				right: -4rpx;
				top: -6rpx;
				z-index: 99;
			}
		}

		.l_title {
			font-size: 24rpx;
			color: #e9a928;
			text-align: center;
			line-height: 80rpx;
		}

		.btn {
			width: 280rpx;
			height: 70rpx;
			margin: auto;

			image {
				width: 100%;
			}
		}
	}

	.content:before {
		content: '';
		position: absolute;
		width: 110%;
		height: 20rpx;
		background: #f4ceaa;
		left: 50%;
		transform: translate(-50%);
		top: -35rpx;
		border-radius: 5rpx;
	}
}

.canvasView {
	width: 100%;
	height: 100%;

	.imgbox {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;

		.images {
			position: absolute;
			padding: 10rpx;
			width: 85%;
			left: 50%;
			transform: translate(-50%);

			.img {
				width: 120rpx;
				height: 120rpx;
				margin: auto;
			}

			.txt {
				line-height: 36rpx;
			}
		}

		image {
			width: 180rpx;
		}

		.canvas1 {
			position: absolute;
			// left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
	}
}
</style>
